Calendar
canonMonth grid with navigation and presets, single or range selection.
Calendar PAGE chrome (acrm !3942, AD 27 Sep 2026): month label = SectionTopBarChip opening the jump popover (the page title stays „Kalendář“); year ←→ = IconButton sm; the 12-month grid reuses the day cell `.dp-day` with `.sel` + aria-current — one „selected“ look for date picking, no button variant as state. DELIBERATE EXCEPTION: the nav trio ‹ ● › (previous · today · next) keeps its own look per the owner’s ACRM-91/97/103 (arrows without a hover surface that only darken, „Dnes“ a small grey circle-dot) — real <button>s with aria-label and a focus ring, tokens only; do not convert to IconButton. The day-panel ear (.cal-ear) is a second exception (surface chrome, tokens only).
Used in 7 files · 6 areas · 7× — components/FilterBar, components/callwrapup, components/mail, components/projects, components/tasks, components/timeline
Import
import { Calendar } from '@acrm/ui'Props
Calendar packages/ui/src/components/Calendar.tsx
| Name | Type | Default | Description |
|---|---|---|---|
mode | 'single' | — | — |
value * | CalendarValue | — | — |
onChange * | (value: CalendarValue, commit: boolean) => void | — | commit=true = uživatel vybral (popover se smí zavřít). |
months | 1 | 2 | — | Kolik měsíců vedle sebe (desktop). Na mobilu (≤720 px) vždy 1. |
locale | string | — | — |
today | Date | — | Referenční „dnešek" — pro testy a ukotvené výpisy. |
min | string | — | — |
max | string | — | — |
presets | CalendarPreset[] | — | — |
head | ReactNode | — | Volitelná hlavička uvnitř plochy (u rozsahu pole „od – do" + počet dní). |
autoFocus | boolean | — | Zaostři mřížku po mountu (popover). |
onRequestClose | () => void | — | Esc z mřížky (popover si zavře panel a vrátí fokus na spouštěč). |